<template>
    <div class="content">
        <div class="bg">
            <div class="center-turntable">
                <canvas ref="canvas" width="405.8" height="387.8" class="canvas"></canvas>
                <div class="turntable">
                    <centerTurntable />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import frame0 from '../../assets/img/center/center-turntable/合成 1_00000.png';
import frame1 from '../../assets/img/center/center-turntable/合成 1_00001.png';
import frame2 from '../../assets/img/center/center-turntable/合成 1_00002.png';
import frame3 from '../../assets/img/center/center-turntable/合成 1_00003.png';
import frame4 from '../../assets/img/center/center-turntable/合成 1_00004.png';
import frame5 from '../../assets/img/center/center-turntable/合成 1_00005.png';
import frame6 from '../../assets/img/center/center-turntable/合成 1_00006.png';
import frame7 from '../../assets/img/center/center-turntable/合成 1_00007.png';
import frame8 from '../../assets/img/center/center-turntable/合成 1_00008.png';
import frame9 from '../../assets/img/center/center-turntable/合成 1_00009.png';
import frame10 from '../../assets/img/center/center-turntable/合成 1_00010.png';
import frame11 from '../../assets/img/center/center-turntable/合成 1_00011.png';
import frame12 from '../../assets/img/center/center-turntable/合成 1_00012.png';
import frame13 from '../../assets/img/center/center-turntable/合成 1_00013.png';
import frame14 from '../../assets/img/center/center-turntable/合成 1_00014.png';
import frame15 from '../../assets/img/center/center-turntable/合成 1_00015.png';
import frame16 from '../../assets/img/center/center-turntable/合成 1_00016.png';
import frame17 from '../../assets/img/center/center-turntable/合成 1_00017.png';
import frame18 from '../../assets/img/center/center-turntable/合成 1_00018.png';
import frame19 from '../../assets/img/center/center-turntable/合成 1_00019.png';

import centerTurntable from './center-turntable.vue';

const frameUrls = [
    frame0, frame1, frame2, frame3, frame4, frame5, frame6, frame7,
    frame8, frame9, frame10, frame11, frame12, frame13, frame14,
    frame15, frame16, frame17, frame18, frame19
];

export default {
    components: { centerTurntable },
    data() {
        return {
            currentFrame: 0,
            interval: null,
            preloadedImages: [], // 预加载的图片数组
            imagesLoaded: false, // 图片是否加载完成
        };
    },
    props: {
        data: {}
    },
    computed: {
    },
    methods: {
        // 预加载所有图片
        preloadImages() {
            return new Promise((resolve) => {
                let loadedCount = 0;
                const totalFrames = frameUrls.length;
                
                frameUrls.forEach((frameUrl, index) => {
                    const img = new Image();
                    img.onload = () => {
                        this.preloadedImages[index] = img;
                        loadedCount++;
                        if (loadedCount === totalFrames) {
                            this.imagesLoaded = true;
                            resolve();
                        }
                    };
                    img.onerror = () => {
                        console.error(`Failed to load frame ${index}`);
                        loadedCount++;
                        if (loadedCount === totalFrames) {
                            this.imagesLoaded = true;
                            resolve();
                        }
                    };
                    img.src = frameUrl;
                });
            });
        },

        drawFrame() {
            if (!this.imagesLoaded || !this.preloadedImages[this.currentFrame]) {
                return;
            }

            const canvas = this.$refs.canvas;
            if (!canvas) return;
            
            const context = canvas.getContext('2d');
            const img = this.preloadedImages[this.currentFrame];
            
            context.clearRect(0, 0, canvas.width, canvas.height);
            context.drawImage(img, 0, 0, canvas.width, canvas.height);

            this.currentFrame = (this.currentFrame + 1) % frameUrls.length;
        },

        getItemStyle(index) {
            // 每个 item 的角度，以弧度表示  
            const angle = index * (2 * Math.PI / this.totalData.length);
            const radiusX = 350; // 椭圆的 X 半径  
            const radiusY = 145; // 椭圆的 Y 半径  
            const gap = 20; // 每个 item 之间的间隔  

            // 计算 x 和 y 的位移  
            const translateX = (radiusX + gap) * Math.cos(angle);
            const translateY = (radiusY + gap) * Math.sin(angle);

            return {
                transform: `translate(${translateX}px, ${translateY}px)`,
                position: 'absolute',
                opacity: 1, // 确保项可见  
            };
        }
    },
    created() {

    },
    async mounted() {
        // 先预加载图片，加载完成后再启动动画
        await this.preloadImages();
        this.interval = setInterval(this.drawFrame, 100); // 设置更新间隔  
    },
    beforeDestroy() {
        if (this.interval) {
            clearInterval(this.interval); // 清除间隔  
        }
        // 清理预加载的图片
        this.preloadedImages = [];
    },
}
</script>

<style lang='scss' scoped>
.content {
    height: 500px;
    width: 900px;
    margin-left: -150px;
    margin-top: 50px;
    .bg {
        height: 727.5px;
        width: 1000.5px;
        background-image: url("../../assets/img/center/center-turntable/index-center.png");
        display: flex;
        // background-color: rgba(0, 0, 0, 0);
        // box-shadow: 0 0 20px 20px #04132f inset;
        // opacity: 0.7;

        // background-color: #081937; // 目标颜色、目标颜色、目标颜色
        // -webkit-mask-size: 100% 100%;
        // mask-size: 100% 100%;
        .center-turntable {
            margin-left: 400px;
            margin-top: 170px;
            height: 387.8px;
            width: 420.8px;
            position: relative;


            .canvas {
                position: absolute;
                bottom: 110px;
                right: 130px;
                background-image: url("../../assets/img/center/center-turntable/turntable-center.png");
            }
        }
    }
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes mymove {
    0% {
        transform: translate(0px, -5px);
    }

    50% {
        transform: translate(0px, 5px);
    }

    100% {
        transform: translate(0px, -5px);
    }

}
</style>